<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/refuel/refuelMap" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                洗车
            </h1>
        </header>
        <main>
            <div class="map-box">
                <div id="map">

                </div>
            </div>
        </main>
        <footer class="flex aic jcsb bcfff">
            <div>
                <p class="mb20">中国石油加油站</p>
                <p>山阳区人民路与解放路交叉口</p>
            </div>
            <button @click="navigation">导航</button>
        </footer>
    </div>
</template>
<script>
export default {
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            var map = new BMapGL.Map(document.querySelector('#map')); // 创建地图实例 
            var point = new BMapGL.Point(116.403429, 39.924066);  // 创建点坐标 
            map.centerAndZoom(point, 15);   // 地图坐标中心点
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


            var myIcon = new BMapGL.Icon(require("../../../assets/img/car-refuel/stores-tab2.png"), new BMapGL.Size(29, 49), {
                anchor: new BMapGL.Size(15, 49)
            });
            // 创建标注对象并添加到地图  
            var marker = new BMapGL.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            // 自定义展示内容
            function createDOM() {
                var div = document.createElement('div');
                div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
                // div.style.backgroundColor = 'black';
                div.style.height = '50rem';
                div.style.width = '200rem';
                div.style.lineHeight = '50rem';
                div.style.whiteSpace = 'nowrap';
                div.style.MozUserSelect = 'none';
                div.style.fontSize = '20rem';
                div.style.borderRadius = '50rem';
                div.style.textAlign = 'center';

                var span = document.createElement('span');
                span.style.lineHeight = '16px';
                span.style.whiteSpace = 'normal';
                span.style.color = '#000';
                div.appendChild(span);
                span.appendChild(document.createTextNode(this.properties.text));

                let img = document.createElement('img');
                img.style.width = '100%';
                img.style.position = 'absolute'
                img.style.top = '6rem'
                img.style.left = 0
                img.style.zIndex = '-1'
                img.src = this.properties.imgSrc;
                div.appendChild(img);

                return div;
            }
            // 创建自定义覆盖物
            var customOverlay = new BMapGL.CustomOverlay(createDOM, {
                point: new BMapGL.Point(116.403429, 39.924066),
                opacity: 0.8,
                offsetY: -80,
                properties: {
                    text: '山阳区人民路',
                    imgSrc: require('../../../assets/img/car-refuel/destined2.png')
                }
            });
            map.addOverlay(customOverlay);
            customOverlay.addEventListener('click', function (e) {
                console.log(e);
            });
        },
        navigation() {
            console.log('导航');
        }
    }
}
</script>

<style scoped>
>>>.anchorBL {
    display: none;
}

* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    height: 434rem;
    padding-top: 60rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main {
    position: relative;
    width: 100%;
    padding: 0 20rem;
}

main .map-box {
    position: absolute;
    top: -290rem;
    border-radius: 20rem 20rem 0 0;
    width: 710rem;
    height: 1020rem;
    background-color: #fff;
    padding: 30rem 30rem 0 30rem;
}

main .map-box div {
    width: 100%;
    height: 100%;
    border-radius: 20rem 20rem 0 0;
}

footer {
    height: 170rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-left: 54rem;
    padding-right: 48rem;
}

footer>div p:first-child {
    font-size: 29rem;
}

footer>div p:last-child {
    font-size: 22rem;
}

footer button {
    width: 150rem;
    height: 65rem;
    font-size: 22rem;
    background-color: #2073f1;
    border-radius: 40rem;
    border: 0;
    color: #fff;
}
</style>